<template>
  <view
    class="card-view"
    :class="{'card--toggle': config.toggleShow, 'card-toggle--open': toggleRef}"
  >
    <template v-if="type == 'default'">
      <view class="card-hd">
        <slot name="hd"></slot>
        <view class="toggle-area" @tap="handleToggle" v-if="config.toggleShow">
          <view class="text">{{toggleRef ? '收起' : '展开'}}</view>
          <view class="icon iconfont icon-a-16_16_arrow_bottom"></view>
        </view>
      </view>
      <view class="card-line"></view>
      <view class="card-bd">
        <slot name="bd"></slot>
      </view>
    </template>
    <template v-if="type == 'box'">
      <slot></slot>
    </template>
  </view>
</template>

<script name="CardView" setup>
const props = defineProps({
  type: {
    type: String,
    default: 'default'
  },
  config: {
    type: Object, // {toggleShow： true}
    default: () => ({})
  }
});

const toggleRef = ref(false);
const handleToggle = () => {
  toggleRef.value = !toggleRef.value;
  console.log('toggleRef', toggleRef.value);
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";

.card {
  &-view {
    // display: flex;
    padding: 24rpx;
    border-radius: 12rpx;
    background: var(--, #FFF);
  }

  &-line {
    margin: 24rpx 0;
    height: 1rpx;
    background: #E5E5EB;
  }

  &--toggle {
    position: relative;

    .toggle-area {
      color: $text-l3-color;
      font-size: 24rpx;
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      display: flex;
      align-items: center;
      .icon {font-size: 16rpx;margin-left: 8rpx;}
    }

    &.card-toggle--open {
      .card-hd .icon {
        transform: rotate(180deg);
      }
      .card-bd, .card-line {
        display: block;
      }
    }
    .card-bd, .card-line {
        display: none;
      }
  }
}
</style>
